import {
  CloseOutlined,
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import {
  Avatar,
  Button,
  Card,
  Col,
  Form,
  Input,
  Popconfirm,
  Row,
  Space,
  message,
} from 'antd';
import React from 'react';
import { history } from 'umi';
import AiAgentDesign from './../AiAgentDesign';
import columnsData, { AppColumnsItem } from './data';
import { deleteRuleSet } from './service';
const { Meta } = Card;

export default () => {
  // Table action 的引用，便于自定义触发 用于更改数据之后的表单刷新
  const actionRef = React.useRef<ActionType>();
  // 表头赋值
  const columns: ProColumns<AppColumnsItem>[] = columnsData;
  const [showDesign, setShowDesign] = React.useState(false);

  // 设计按钮
  const design = () => {
    // setSchema(JSON.parse(record.modelEditorJson));
    setShowDesign(true);
  };

  // 操作列渲染
  const optionRender = (text: any, record: any) => [
    <div key={record.serialNo}>
      <Space size="middle">
        <a onClick={() => design()}>设计</a>
        <a
          onClick={() => {
            // 跳转逻辑
            history.push(
              `/ruleEngine-administration/ruleSet?serialNo=${record.serialNo}&disable=1`,
            );
          }}
        >
          详情
        </a>
        <a
          onClick={() => {
            // 跳转逻辑
            history.push(
              `/ruleEngine-administration/ruleSet?serialNo=${record.serialNo}`,
            );
          }}
        >
          修改
        </a>
        <Popconfirm
          title="你确认要删除吗？"
          onConfirm={() => {
            deleteRuleSet({ ids: [record.serialNo] }).then(() => {
              message.success('删除成功');
              actionRef.current?.reload();
            });
          }}
          okText="是"
          cancelText="否"
        >
          <a>删除</a>
        </Popconfirm>
      </Space>
    </div>,
  ];

  // 自定义表格头部渲染
  columns.forEach((item: any) => {
    if (item.dataIndex === 'option') {
      item.render = optionRender;
    }
  });

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  const [form] = Form.useForm();

  return (
    <div>
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        <Card>
          <Form form={form} name="advanced_search" onFinish={onFinish}>
            <Row gutter={24}>
              <Col span={8} key="1">
                <Form.Item
                  label="名称"
                  rules={[
                    {
                      required: true,
                      message: 'Input something!',
                    },
                  ]}
                >
                  <Input placeholder="placeholder" />
                </Form.Item>
              </Col>
              <Col span={8} key="1">
                <Form.Item
                  label="类型"
                  rules={[
                    {
                      required: true,
                      message: 'Input something!',
                    },
                  ]}
                >
                  <Input placeholder="placeholder" />
                </Form.Item>
              </Col>
              <Col span={8} key="1">
                <div style={{ textAlign: 'right' }}>
                  <Space size="small">
                    <Button
                      onClick={() => {
                        form.resetFields();
                      }}
                    >
                      重置
                    </Button>
                    <Button type="primary" htmlType="submit">
                      搜索
                    </Button>
                  </Space>
                </div>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card
          title="智能体"
          extra={
            <Button type="primary" onClick={() => design()}>
              新增
            </Button>
          }
          style={{}}
        >
          <Space size="middle" style={{ display: 'flex', flexWrap: 'wrap' }}>
            {/* {knowledgeBaseList.map((knowledgeBase) => { */}
            <Card
              style={{ width: 300 }}
              actions={[
                <SettingOutlined key="setting"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                />,
                <EditOutlined key="edit"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                  title="编辑"
                />,
                < EllipsisOutlined
                  key="ellipsis"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                  title="详情"
                />,
              ]}
            >
              <Meta
                avatar={
                  <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />
                }
                title="数字分身"
                description="博羸的数字分身"
              />
            </Card>
            <Card
              style={{ width: 300 }}
              actions={[
                <SettingOutlined key="setting"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                />,
                <EditOutlined key="edit"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                  title="编辑" />,
                <EllipsisOutlined
                  key="ellipsis"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                  title="详情"
                />,
              ]}
            >
              <Meta
                avatar={
                  <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />
                }
                title="品牌官"
                description="火源社区品牌官"
              />
            </Card>
            <Card
              style={{ width: 300 }}
              actions={[
                <SettingOutlined key="setting"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                />,
                <EditOutlined key="edit"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                  title="编辑" />,
                <EllipsisOutlined
                  key="ellipsis"
                  onClick={() => {
                    setShowDesign(true);
                  }}
                  title="详情"
                />,
              ]}
            >
              <Meta
                avatar={
                  <Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />
                }
                title="占卜师"
                description="火源社区占卜师"
              />
            </Card>
            {/* })} */}
          </Space>
        </Card>
      </Space >
      {
        showDesign ? (
          <div
            style={{
              width: '99vw',
              height: '100vh',
              position: 'fixed',
              padding: '20px',
              top: 0,
              left: 0,
              backgroundColor: '#fff',
              zIndex: 999,
            }}
          >
            <CloseOutlined
              onClick={() => {
                actionRef.current?.reload();
                setShowDesign(false);
              }}
              style={{
                fontSize: '18px',
                position: 'fixed',
                top: 45,
                right: 18,
                zIndex: 99999,
              }}
            />
            <AiAgentDesign />
          </div >
        ) : null
      }
    </div >
  );
};
